<template>
  <div class="list">
    <div>
      <van-nav-bar fixed>
        <template v-slot:left>
          <img class="logo" src="@/imgs/toutiao_logo.png" alt="">
        </template>
          <template #right>
            <van-icon name="search" size="18" color="#fff" />
          </template>
      </van-nav-bar>
      <div>
        <van-tabs 
        v-model="active"
        animated
        sticky
        offset-top="2.9rem">
            <van-tab v-for="item in channelList" :key="item.id" :title="item.name"><ArticleList></ArticleList></van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
  import { userChannelAPI } from '@/api'
  import ArticleList from '@/views/Homes/ArticleList.vue'


export default {
  name: 'List',
  data () {
    	return {
        	channelList: [], // 频道数据
          active: 0
    	}
	},
    async created () {
		const res = await userChannelAPI()
		this.channelList = res.data.data.channels
	},
  components: {
      ArticleList
    }
}
</script>
<style scoped lang="less">
  /deep/.van-nav-bar__content {
    background-color: blue;
  }
  .logo {
    width: 100px;
    height: 30px;
  }
  /deep/ .van-tabs__content{
    padding-top: 44px;
}

</style>